<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 结论：
      同步代码是直接放到主线程执行的，而异步任务要放入任务队列中等待执行，任务队列分宏任务和微任务
        new Promise() 还是同步执行的 

        then 才是异步执行的    属于微任务

        async 相当于new Promise（）是同步执行的
         await 相当于then  是异步执行的
         await 下面的代码必须等待 await语句执行完才会开始执行
         例如await console.log(111)
             console.log(22222)
            必须等待111执行完了了才能开始执行2222

        setTimeout是宏任务 是最后执行的

        先执行主线程的任务 在执行微任务 最后就是宏任务


        这里同步和异步涉及到了js的执行机制：
          js执行机制：js会把所有的同步任务放到主线程执行栈中，将异步任务将他的回调函数放到任务队列中去，一旦执行栈
          中的同步任务执行完毕，系统就会按次序读取任务队列中的异步任务 异步任务也分为宏任务和微任务，微任务的执行时机
          大于宏任务

        宏任务有哪些：I/O 定时器 
        微任务：then catch finally

          
      
      script start
      async1 start
      async2
      promise1
      script end
      async1 end 
      promise2
      setTimeout
    -->
    <script>
      async function async1() {
        // 2.在执行 同步任务
        console.log("async1 start");
        await async2();
        // 6.要等待async2完成  因为async内部是同步执行的
        console.log("async1 end");
      }
      async function async2() {
        // 5.一直在微队列中 等待同步任务完成
        console.log("async2");
      }
      // 1.先执行  同步任务
      console.log("script start");
      setTimeout(function () {
        // 8.微任务完成  宏任务开始执行
        console.log("setTimeout");
      }, 0);
      async1();
      new Promise(function (resolve) {
        // 3.在执行  同步任务
        console.log("promise1");
        resolve();
      }).then(function () {
        // 7. 微任务开始执行
        console.log("promise2");
      });
      // 4。在执行  同步任务
      console.log("script end");
      console.log("-------------------------");
      // 1-4-5-8-6-2-3-7  
      console.log(1);
      setTimeout(() => {
        console.log(2);
        Promise.resolve().then(() => {
          console.log(3);
        });
      });
      console.log(4);
      new Promise((resolve, reject) => {
        console.log(5);
        resolve();
      }).then(() => {
        console.log(6);
        // 这里需要注意：微任务中又来了一个宏任务，讲这个任务加入到任务队列中，所以就会先执行2 3 在执行7
        setTimeout(() => {
          console.log(7);
        });
      });
      console.log(8);
    </script>
  </body>
</html>
